<script setup lang="ts">
import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import {
  sysOperateLogAddApi,
  sysOperateLogEditApi,
  sysOperateLogQueryByIdApi,
} from '#/api/system/sysOperateLog';
import { queryDictOptionsApi } from '#/utils';

const record = ref({});
const [Form, formApi] = useVbenForm({
  layout: 'horizontal',
  wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-2',
  showDefaultActions: false,
  commonConfig: {
    colon: true,
    labelWidth: 80,
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'Input',
      label: '模块',
      fieldName: 'moduleName',
      componentProps: {
        placeholder: '请输入模块',
      },
    },
    {
      component: 'ApiRadioGroup',
      label: '业务类型',
      fieldName: 'businessType',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        afterFetch: (data) => {
          return data.map((item: any) => ({
            label: item.itemText,
            value: Number.parseInt(item.itemVal),
          }));
        },
        api: queryDictOptionsApi,
        params: {
          dictCode: 'operate_type',
        },
      },
    },
    {
      component: 'Input',
      label: '方法名称',
      fieldName: 'methodName',
      componentProps: {
        placeholder: '请输入方法名称',
      },
    },
    {
      component: 'Input',
      label: '请求方式',
      fieldName: 'requestMethod',
      componentProps: {
        placeholder: '请输入请求方式',
      },
    },
    {
      component: 'Input',
      label: '操作类别',
      fieldName: 'operatorType',
      componentProps: {
        placeholder: '请输入操作类别',
      },
    },
    {
      component: 'Input',
      label: '操作人员',
      fieldName: 'operName',
      componentProps: {
        placeholder: '请输入操作人员',
      },
    },
    {
      component: 'Input',
      label: '部门名称',
      fieldName: 'deptName',
      componentProps: {
        placeholder: '请输入部门名称',
      },
    },
    {
      component: 'Input',
      label: '请求URL',
      fieldName: 'operUrl',
      componentProps: {
        placeholder: '请输入请求URL',
      },
    },
    {
      component: 'Input',
      label: '主机地址',
      fieldName: 'operIp',
      componentProps: {
        placeholder: '请输入主机地址',
      },
    },
    {
      component: 'Input',
      label: '操作地点',
      fieldName: 'operLocation',
      componentProps: {
        placeholder: '请输入操作地点',
      },
    },
    {
      component: 'Textarea',
      label: '请求参数',
      fieldName: 'operParam',
      componentProps: {
        placeholder: '请输入请求参数',
      },
    },
    {
      component: 'Textarea',
      label: '响应参数',
      fieldName: 'jsonResult',
      componentProps: {
        placeholder: '请输入响应参数',
      },
    },
    {
      component: 'ApiRadioGroup',
      label: '操作状态',
      fieldName: 'status',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        afterFetch: (data) => {
          return data.map((item: any) => ({
            label: item.itemText,
            value: Number.parseInt(item.itemVal),
          }));
        },
        api: queryDictOptionsApi,
        params: {
          dictCode: 'ok_fail',
        },
      },
    },
    {
      component: 'Textarea',
      label: '错误消息',
      fieldName: 'errorMsg',
      componentProps: {
        placeholder: '请输入错误消息',
      },
    },
    {
      component: 'DatePicker',
      label: '操作时间',
      fieldName: 'operTime',
      componentProps: {
        placeholder: '请输入操作时间',
      },
    },
    {
      component: 'InputNumber',
      label: '消耗时间',
      fieldName: 'costTime',
      componentProps: {
        placeholder: '请输入消耗时间',
      },
    },
  ],
});

const [Modal, modalApi] = useVbenModal({
  title: 'Modal',
  onCancel: () => {
    modalApi.close();
  },
  onConfirm: onSubmit,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      record.value = modalApi.getData<Record<string, any>>();
      modalApi.setState({
        title: `${record.value.id ? '编辑' : '新增'}系统操作日志`,
      });
      if (record.value.id) {
        initFun();
      }
    }
  },
});

async function initFun() {
  const res = await sysOperateLogQueryByIdApi({ id: record.value.id });
  await formApi.setValues(res, false);
}
async function onSubmit() {
  const { valid } = await formApi.validate();
  const values = await formApi.getValues();
  if (valid) {
    if (record.value.id) {
      const msg = await sysOperateLogEditApi(values);
      message.success(msg);
      await modalApi.close();
    } else {
      const msg = await sysOperateLogAddApi(values);
      message.success(msg);
      await modalApi.close();
    }
  }
}
</script>

<template>
  <Modal>
    <Form />
  </Modal>
</template>
